<template>
	<view class="container">
		<!-- 导航栏 -->
		<view class="nav-bar">
			<view class="title">购物车</view>
		</view>
		<!-- 购物车商品列表 -->
		<view class="cart-list">
			<view class="ds_">
				<view style="color: #7A7A7A;">总共3件商品</view>
				<view @click="ifEdit = !ifEdit">编辑</view>
			</view>
			<view class="cart-item" v-for="item in cartItems" :key="item.id">
				<view class="check-box" :style="!item.checked ? 'border: 1px solid #216AC1;' : ''" v-if="ifEdit"
					@click="chooseShop(item.id)">
					<u-icon v-if="item.checked" name="checkmark-circle-fill" color="#216AC1" size="20"></u-icon>
				</view>
				<image class="item-image" :src="item.image"></image>
				<view class="item-info">
					<text class="item-name">{{item.name}}</text>
					<text class="item-spec">{{item.spec}}</text>
					<view class="item-bottom">
						<view class="current-price">
							<text class="item-price">¥{{item.price}}</text>
							<text class="price-decimal">¥29000</text>
						</view>
						<u-number-box integer min="0" v-model="item.quantity">
							<view slot="minus" class="minus">
								<u-icon name="minus" size="12"></u-icon>
							</view>
							<text slot="input" style="width: 26px;text-align: center;"
								class="input">{{item.quantity}}</text>
							<view slot="plus" class="plus">
								<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
							</view>
						</u-number-box>
					</view>
				</view>
			</view>
		</view>

		<!-- 结算栏 -->
		<view class="checkout-bar">
			<view class="check-box" :style="!allChecked ? 'border: 1px solid #4B54B7;' : 'background:none'"
				@click="toggleAllCheck()">
				<u-icon v-if="allChecked" name="checkmark-circle-fill" color="#4B54B7" size="20"></u-icon>
			</view>
			<view class="total">
				<view>
					<text>合计：</text>
					<text class="total-price">¥{{totalPrice}}</text>
				</view>
				<view class="total-desc">配件¥{{totalPrice}}+安装费:¥0.00+检测费¥0.00</view>
			</view>
			<view class="checkout-btn">结算({{checkedCount}})</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				msg: 3,
				cartItems: [{
						id: 1,
						name: '预喷房 （后排风）',
						spec: 'Blowtherm/宝富',
						price: '49999.00',
						image: 'https://seep.sdstm.cn/oss/upload/image/20251009/1161002003346751488.png',
						quantity: 1,
						checked: true
					},
					{
						id: 2,
						name: 'CADIS-C17',
						spec: 'CHRIST',
						price: '22600',
						image: 'https://seep.sdstm.cn/oss/upload/image/20251009/1161002003346751488.png',
						quantity: 2,
						checked: false
					}
				],
				ifEdit: true
			}
		},
		computed: {
			// 计算总价
			totalPrice() {
				return this.cartItems
					.filter(item => item.checked)
					.reduce((total, item) => total + (item.price * item.quantity), 0)
					.toFixed(2);
			},
			// 计算选中数量
			checkedCount() {
				return this.cartItems.filter(item => item.checked).length;
			},
			// 是否全选
			allChecked() {
				return this.cartItems.length > 0 && this.cartItems.every(item => item.checked);
			}
		},
		methods: {
			// 切换选中状态
			chooseShop(id) {
				const item = this.cartItems.find(item => item.id === id);
				if (item) {
					item.checked = !item.checked;
				}
			},
			// 全选/取消全选
			toggleAllCheck() {
				const checked = !this.allChecked;
				this.cartItems.forEach(item => {
					item.checked = checked;
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		background-color: #ffffff;
		min-height: 100vh;
		padding-bottom: 10px;
		box-sizing: border-box;
	}

	/* 导航栏样式 */
	.nav-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 15px;
		height: 74px;
		background-color: #216AC1;
	}

	.title {
		font-size: 18px;
		color: #fff;
		margin-top: 40px;
	}

	/* 购物车商品列表样式 */
	.cart-list {
		margin-top: 10px;
		background-color: #ffffff;
		padding: 0 14px;
		box-sizing: border-box;
	}

	.ds_ {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
	}

	.cart-item {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		justify-content: space-between;
	}

	.check-box {
		width: 18px;
		height: 18px;
		margin: 0 10px;
		border-radius: 50%;
		margin-right: 10px;
		background: #fff;
	}

	.item-image {
		width: 80px;
		height: 80px;
		border-radius: 4px;
		margin-right: 10px;
		border: 1px solid #EBEBEB;
	}

	.item-info {
		flex: 1;
	}

	.item-name {
		font-size: 14px;
		font-weight: bold;
		color: #333333;
		line-height: 20px;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.item-spec {
		font-size: 12px;
		color: #666666;
		background-color: #f5f5f5;
		border-radius: 10px;
		padding: 3px 10px;
		box-sizing: border-box;
		margin-top: 5px;
		display: inline-block;
	}

	.item-bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10px;
	}

	.current-price {
		display: flex;
		align-items: baseline;
		margin-right: 10px;
	}

	.item-price {
		font-size: 16px;
		color: #F8485D;
	}

	.price-decimal {
		font-size: 10px;
		color: #B3AFAF;
		text-decoration: line-through;
		margin-left: 5px;
	}

	.minus {
		width: 22px;
		height: 22px;
		border-width: 1px;
		border-color: #E6E6E6;
		border-style: solid;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #216AC1;
		border-radius: 5px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 结算栏样式 */
	.checkout-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 66px;
		background-color: #0A0D3A;
		color: #fff;
		display: flex;
		align-items: center;
		padding: 0 12px;
		box-sizing: border-box;
	}

	.total {
		flex: 1;
		font-size: 18px;
	}

	.total-price {
		font-size: 16px;
		color: #F8485D;
		font-weight: bold;
	}

	.total-desc {
		font-size: 12px;
		margin-top: 5px;
		color: rgba(255, 255, 255, 0.6);
	}

	.checkout-btn {
		height: 30px;
		background-color: #F7B74F;
		border-radius: 18px;
		padding: 0 14px;
		box-sizing: border-box;
		line-height: 30px;
		color: #000000;
		font-size: 14px;
		font-weight: bold;
	}
</style>